<template>
	<div class="login" :style="backimg">
		<el-card class="box-card" shadow="always">
			<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="账号" prop="age">
					<el-input v-model.number="ruleForm.age"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="pass">
					<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="checkPass">
					<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
				</el-form-item>
				  <el-form-item label="角色选择" prop="resource">
				    <el-radio-group v-model="ruleForm.resource">
				      <el-radio label="学生"></el-radio>
				      <el-radio label="教师"></el-radio>
				    </el-radio-group>
				  </el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm')">登陆</el-button>
					<el-button @click="resetForm('ruleForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
	import {mapState,mapMutations,mapActions} from 'vuex'
	export default {
		data() {
			var userName = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入账号'));
				} else {
					callback();
				}
				setTimeout(() => {
					if (!Number.isInteger(value)) {
						callback(new Error('请输入数字值'));
					}
				}, 1000);
			};
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				}else if(value.length < 5){
					callback(new Error('密码必须大于6位'));
				} else {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('checkPass');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.ruleForm.pass) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				backimg: "",
				ruleForm: {
					pass: '',
					checkPass: '',
					age: '',
					resource: ''
				},
				rules: {
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					checkPass: [{
						validator: validatePass2,
						trigger: 'blur'
					}],
					age: [{
						validator: userName,
						trigger: 'blur'
					}],
					resource: [{ required: true, message: '请选择登陆角色', trigger: 'change' }]
				}
			}
		},
		computed:{
			...mapState(['isLogin','token','userinfo']),
		},
		created() {
			var imgUrl = 'https://www.heiyi666.cn/%E7%BB%84%205%20%281%29.png'
			this.backimg = 'background-image: url(' + imgUrl + ');'
		},
		methods: {
			...mapActions(['setTokenActions','setisLoginActions','setUserinfoActions',]),
			async submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if(this.ruleForm.resource == '教师'){
							this.$http.post('/admin/login',{
									username:this.ruleForm.age,
									password:this.ruleForm.checkPass,
								}).then((res)=>{
									// alert(res.data.notice); // 提示语
									this.$notify({
										title: res.data.notice,
										message: '是时候建立史诗了!',
										type: 'success'
									});
									console.log(res)
									var userinfos = {
										email: res.data.email,
										phone: res.data.phone,
										status: res.data.status,
										username: res.data.username,
										fullname: res.data.fullname
									}
									this.$store.dispatch('setTokenActions',res.data.authorization)
									this.$store.dispatch('setisLoginActions',true)
									this.$store.dispatch('setUserinfoActions',userinfos)
									this.$store.dispatch('setloginTimeActions','7200000')
									this.$router.push('/Home')
								}).catch((err)=>{
									console.log(err)
								});
						}else if(this.ruleForm.resource == '学生'){
							alert('学生,emmm功能还没做')
						}else{
							// alert('不作为')
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.ruleForm.pass = this.ruleForm.checkPass = this.ruleForm.age = this.ruleForm.resource = ''
			}
		}
	}
</script>

<style scoped>
	li {
		list-style: none;
	}

	.login {
		width: 100%;
		height: 100vh;
		background-color: #3764A9;
		background-size: 100% 100%;
		margin-left: -15px;
			/* background-image: ; */
	}

	.box-card {
		margin: 0px auto;
		width: 480px;
		position: relative;
		top: 20%;
	}
</style>
